/**
 * Created by xiangjiayu on 2017/8/5.
 * 职位/会员管理
 */
import React from "react";
import {Button, Col, DatePicker, Icon, Input, Modal, Radio, Row, Select, Steps, Tree} from "antd";
import MyIcon from "../../components/common/MyIcon/MyIcon";

//常用组件引用
const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const {MonthPicker, RangePicker} = DatePicker;//日历
const Step = Steps.Step;                //步骤条
const Search = Input.Search;    //搜所框
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const TreeNode = Tree.TreeNode;
const confirm = Modal.confirm;


export default class Member extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Modaldepartmentadd: false,
      showModaldepartmentedit:false,
    };
  }

  showModaldepartmentadd(Modaldepartmentadd) {
    this.setState({Modaldepartmentadd});
  }
  showModaldepartmentedit(Modaldepartmentedit) {
    this.setState({Modaldepartmentedit});
  }

  render() {
    let that = this;
    function showConfirm() {
      confirm({
        title: '确定要删除职位?',
        content: '',
        maskClosable:false,
        onOk() {
        },
        onCancel() {
        },
      });
    }
    return (
      <div>
        <h3 className="title-h3">职能管理</h3>
        <div className="depart-caozuo"><Button type="primary" onClick={() => this.showModaldepartmentadd(true)}>新增职能</Button></div>
        <Modal
          title="新建职能"
          wrapClassName="vertical-center-modal"
          visible={this.state.Modaldepartmentadd}
          onCancel={() => this.showModaldepartmentadd(false)}
          okText="确定"
          cancelText="取消"
          width='350'
        >
          <div className="modal-add-cont">
            <Row gutter={16}>
              <Col span={6} className="text-r">
                <div className="ant-form-item-label">
                  <label className="ant-form-item-required"><span className="span-left">职能名称</span></label>
                </div>
              </Col>
              <Col span={18}>
                <div className="ant-form-item-control has-error">
                  <Input size="large" placeholder="请输入职能名称"/>
                </div>
              </Col>
              <Col span={24}>
                <div className="error-tip"><Icon type="minus-circle-o" />错误提示信息</div>
              </Col>
            </Row>
          </div>
        </Modal>
        <div className="organize">
          <Row gutter={16}>
            <Col span={6}>
              <div className="posi-mem-left depart-left">
                <ul>
                  <li>
                    <a href="">超级功能</a>
                    <span className="caozuo">
                      <span  onClick={() => this.showModaldepartmentedit(true)}><MyIcon type="edit-o"/></span>
                      <Icon type="minus-square-o" onClick={showConfirm}/>
                    </span>
                  </li>
                  <li className="active">
                    <a href="">高级功能</a>
                    <span className="caozuo">
                      <span  onClick={() => this.showModaldepartmentedit(true)}><MyIcon type="edit-o"/></span>
                      <Icon type="minus-square-o" onClick={showConfirm}/>
                    </span>
                  </li>
                  <li>
                    <a href="">基本功能</a>
                    <span className="caozuo">
                      <span  onClick={() => this.showModaldepartmentedit(true)}><MyIcon type="edit-o"/></span>
                      <Icon type="minus-square-o" onClick={showConfirm}/>
                    </span>
                  </li>
                </ul>
              </div>
              <Modal
                title="编辑职能"
                wrapClassName="vertical-center-modal"
                visible={this.state.Modaldepartmentedit}
                onCancel={() => this.showModaldepartmentedit(false)}
                okText="确定"
                cancelText="取消"
                width='350'
              >
                <div className="modal-add-cont">
                  <Row gutter={16}>
                    <Col span={6} className="text-r">
                      <div className="ant-form-item-label">
                        <label className="ant-form-item-required"><span className="span-left">职能名称</span></label>
                      </div>
                    </Col>
                    <Col span={18}>
                      <div className="ant-form-item-control">
                        <Input size="large" placeholder="请输入职能名称" defaultValue="高级职能"/>
                      </div>
                    </Col>
                  </Row>
                </div>
              </Modal>
            </Col>
            <Col span={18}>
              <div className="department-right-title"><h3>功能权限</h3></div>
              <Tree
                checkable
                showLine
                defaultExpandedKeys={['控制台']}
                onSelect={this.onSelect}
              >
                <TreeNode title="控制台" key="控制台">
                  <TreeNode title="控制台" key="控制台"></TreeNode>
                </TreeNode>
                <TreeNode title="订单" key="订单">
                  <TreeNode title="订单" key="订单">
                    <TreeNode title="订单转移" key="订单转移"></TreeNode>
                    <TreeNode title="订单分配" key="订单分配"></TreeNode>
                    <TreeNode title="订单删除" key="订单删除"></TreeNode>
                    <TreeNode title="订单编辑" key="订单编辑"></TreeNode>
                    <TreeNode title="订单新增" key="订单新增"></TreeNode>
                  </TreeNode>
                  <TreeNode title="保洁订单" key="保洁订单">
                    <TreeNode title="订单转移" key="订单转移"></TreeNode>
                    <TreeNode title="订单分配" key="订单分配"></TreeNode>
                    <TreeNode title="订单删除" key="订单删除"></TreeNode>
                    <TreeNode title="订单编辑" key="订单编辑"></TreeNode>
                    <TreeNode title="订单新增" key="订单新增"></TreeNode>
                  </TreeNode>
                </TreeNode>
                <TreeNode title="企业" key="企业">
                  <TreeNode title="企业菜单" key="企业菜单"></TreeNode>
                </TreeNode>
                <TreeNode title="服务师" key="服务师">
                  <TreeNode title="企业菜单" key="订单转移"></TreeNode>
                </TreeNode>
                <TreeNode title="客户" key="客户">
                  <TreeNode title="订单转移" key="订单转移"></TreeNode>
                </TreeNode>
              </Tree>
              <div className="page-btn-cont">
                <Button type="primary">保存</Button>
              </div>
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}